<template>
  <div class="invitationPag front-color">
    <!-- 头图 -->
    <div class="inviteHeadFigure">
      <img src="../../assets/addImg/invitation/invitationbg.png" alt=".">
      <div class="inviteHeadFigureText">
        <p class="bigTitle"><span class="inviteFrend">{{$t('myAdd.invitation.inviteGoodFriend')}}</span><span class="getTask">{{$t('myAdd.invitation.togetherGetCandy')}}</span></p>
        <p class="middleTitle">{{$t('myAdd.invitation.inviBigTitleDes')}}</p>
        <p class="smallTitle">{{$t('myAdd.invitation.inviBigTitleDes2')}}</p>
      </div>
    </div>
    <!-- 我的邀请收益 -->
    <div class="myInviteIncome">
      <div class="myInviteIncomeTitle">
        <span class="bigTitle">{{$t('myAdd.invitation.myInviteMoney')}}</span>
        <span class="smallDes" v-if="userInviteInfo.isParticipate === 2 || userInviteInfo.isParticipate === 3"><span v-if="userInviteInfo.isParticipate === 2">{{userInviteInfo.rule}}</span><span v-if="userInviteInfo.isParticipate === 3">{{userInviteInfo.reason}}</span></span>
        <span class="upgrage pointer" v-if="userInviteInfo.upgrage" @click="showUpgrageDialog">{{$t('myAdd.invitation.upgrage')}}</span>
      </div>
      <div class="myInviteIncomeTab">
        <div class="card cleanfix left_card pointer" @click="toInviteFriends">
          <div class="cardLeft cardLeft_left">
            <i class="icon--default1"></i>
          </div>
          <div class="cardRight">
            <P class="tabName">{{$t('myAdd.invitation.hasInviteFrends')}}</P>
            <P class="tabData">{{userInviteInfo.inviteCount}}</P>
          </div>
        </div>
        <div class="card cleanfix middle_cad pointer" @click="toInviteReward">
          <div class="cardLeft cardLeft_middle">
            <i class="icon-uniE939"></i>
          </div>
          <div class="cardRight">
            <P class="tabName">{{$t('myAdd.invitation.inviteReward')}}</P>
            <P class="tabData">{{userInviteInfo.inviteReward}}<span class="coin">CNY</span></P>
          </div>
        </div>
        <div class="card cleanfix right_card pointer" @click="clickToApply">
          <div class="cardLeft cardLeft_right">
            <i class="icon-1"></i>
          </div>
          <div class="cardRight">
            <P class="tabName">{{$t('myAdd.invitation.invitationCommission')}}</P>
            <p class="tabData" v-show="userInviteInfo.isParticipate === 0"><span class="applyText">{{$t('myAdd.invitation.applyManager')}}</span></p>
            <p class="tabData" v-show="userInviteInfo.isParticipate === 1"><span class="applyIng">{{$t('myAdd.invitation.applyReview')}}</span></p>
            <p class="tabData" v-show="userInviteInfo.isParticipate === 3"><span class="applyIng">{{$t('myAdd.invitation.applyFail')}}</span></p>
            <P class="tabData" v-show="userInviteInfo.isParticipate === 2">{{userInviteInfo.commissionCount}}<span class="coin">CNY</span></P>
          </div>
        </div>
      </div>
    </div>
    <!-- 我的分享方式 -->
    <div class="share">
      <div class="shareTitle">{{$t('myAdd.invitation.myShareMethods')}}</div>
      <div class="shareMethods">
        <div class="shareMethods_name clearfix">
          <div class="shareMethods_left choosePoster_text">{{$t('myAdd.invitation.qrCodePosters')}}</div>
          <div class="shareMethods_middle copyInviteCode_text">{{$t('myAdd.invitation.inviteCode')}}</div>
          <div class="shareMethods_right copyLink_text">{{$t('myAdd.invitation.inviteRegUrl')}} <span class="pointer pcOrH5 fontsize16" @click="chooseInviteLink">{{h5OrPc}}</span></div>
        </div>
        <div class="shareMethods_operating clearfix">
          <div class="shareMethods_left choosePoster_operat pointer" @click="showPosterDialog" :class="{readOnly: !dbClick}"><p class="choosePoster pointer">{{$t('myAdd.invitation.chooseMyPosters')}}</p></div>
          <div class="shareMethods_middle copyInviteCode_operat"><p class="copyInviteCode">{{inviteCode}}<span class="copyCode_Text pointer" @click="copyCode">{{$t('myAdd.invitation.copy')}}</span></p></div>
          <input type="text" class="inviteCode_inp" ref="inviteCode" :value="inviteCode" name="code">
          <div class="shareMethods_right copyLink_operat"><p class="copyLink">{{inviteUrl}}<span class="copyLink_Text pointer" @click="copyInviteUrl">{{$t('myAdd.invitation.copy')}}</span></p></div>
          <input type="text" class="inviteUrl_inp" ref="inviteUrl" :value="inviteUrl" name="url">
        </div>
      </div>
      <!-- 分享到 -->
      <div class="shareTo clearfix">
        <baiduShare></baiduShare>
        <span class="shareText">{{$t('myAdd.invitation.shareTo')}}:</span>
        <div class="iconDiv">
          <span><i class="icon-uniE93E"></i></span>
          <span><i class="icon-2"></i></span>
          <span><i class="icon-3"></i></span>
          <span><i class="icon-QQ"></i></span>
          <span><i class="icon-twitter"></i></span>
        </div>
      </div>
    </div>
    <div class="line"></div>
    <!-- 邀请规则 -->
    <div class="rule">
      <Rules :ruleList = 'Internationalization.invitedRuler'></Rules>
    </div>
    <!-- 海报 -->
    <Posters :showPosters="showPosters" @closePosterDialog="closeDialog" :inviteQECode="inviteQECode" :invite_img="invite_img"></Posters>
    <!-- 立即申请海报弹窗 -->
    <ManagerDialog :showManagerDialog="showManagerDialog" @closeManagerDialog="closeDialog" :dialogRule="userInviteInfo.dialog" @toApplyNow="toApplyNow" :dbClick="dbClick"></ManagerDialog>
    <span v-if="baseData"></span>
    <!-- 去实名弹窗 -->
    <elDialog :flag='toC1Vertify' title='' :width='450' :dialogClose='closeDialog'>
      <div class="toC1VertifyTitle" slot="operation">
        {{$t('myAdd.invitation.applyManager')}}
      </div>
      <div class="toC1VertifyContent" slot="content">
        {{$t('myAdd.invitation.firstRealName')}}
      </div>
      <div slot="options">
        <button class="cancel" @click="closeDialog">{{$t('myAdd.invitation.cancel')}}</button>
        <button class="toC2" @click="toC1">{{$t('myAdd.invitation.toCertification')}}</button>
      </div>
    </elDialog>
    <!-- 申请成为经理人 -->
    <elDialog :flag='applyToManager' title='' :width='450' :dialogClose='closeDialog'>
      <div class="applyToManagerTitle" slot="operation">
        {{$t('myAdd.invitation.applyManager')}}
      </div>
      <div class="applyToManagerContent" slot="content">
        {{userInviteInfo.rule}}
      </div>
      <div slot="options">
        <button class="cancel" @click="closeDialog">{{$t('myAdd.invitation.cancel')}}</button>
        <button :class="{readOnly: !dbClick}" @click="toApplyNow">{{$t('myAdd.invitation.nowApply')}}</button>
      </div>
    </elDialog>
    <!-- 升级弹窗  -->
    <elDialog :flag="upgrageDialogFlag" title="" :width="450" :dialogClose="closeDialog">
      <div class="upDateDialogTitle" slot="operation">{{$t('myAdd.invitation.managerUp')}}</div>
      <div class="upDateDialogCont" slot="content">
        {{userInviteInfo.dialog}}
      </div>
      <div slot="options">
        <button class="cancel" @click="closeDialog">{{$t('myAdd.invitation.cancel')}}</button>
        <button :class="{readOnly: !dbClick}" @click="toUpgrageNow">{{$t('myAdd.invitation.nowUpdate')}}</button>
      </div>
    </elDialog>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import elDialog from '@/components/common/addCommon/dialog'
import Rules from '@/components/addPage/common/rules'
import Posters from './invitation/posters'
import ManagerDialog from './invitation/managerDialog'
import baiduShare from '@/components/addPage/common/baiduShare'
export default {
  name: 'invitation',
  components: { Rules, elDialog, Posters, ManagerDialog, baiduShare },
  data () {
    return {
      toC1Vertify: false, // 去实名
      applyToManager: false, // 申请经理人
      dbClick: true,
      authNewLevel: '',
      inviteQECode: '',
      showPosters: false,
      showManagerDialog: false,
      upgrageDialogFlag: false,
      userInviteInfo: {
        upgrage: false, // 是否升级
        inviteCount: 0, // 邀请好友数量
        isParticipate: null, // 0未申请 1申请审核中 2已通过 3未通过
        inviteReward: 0, // 邀请奖励
        commissionCount: 0, // 邀请佣金
        fee: null, // 返佣比例
        rule: null, // 规则
        reason: null, // 审核不通过原因
        level: null, // 返佣等级
        dialog: null // 弹窗规则说明
      },
      invite_img: [],
      http: location.protocol + '//',
      showH5OrPcInviteLink: 'PC'
    }
  },
  computed: {
    ...mapState({
      baseData ({ baseData }) {
        if (baseData.isReady) {
          return baseData
        } else {
          return false
        }
      },
      userInfo ({baseData: {_user}}) {
        if (_user) {
          this.inviteQECode = _user.inviteQECode
          this.authNewLevel = _user.authNewLevel
        }
        return _user || false
      }
    }),
    Internationalization () {
      return {
        invitedRuler: [
          {
            title: this.$t('myAdd.invitation.ruler'),
            content: [
              this.$t('myAdd.invitation.textp1'),
              this.$t('myAdd.invitation.textp2'),
              this.$t('myAdd.invitation.textp3'),
              this.$t('myAdd.invitation.textp4'),
              this.$t('myAdd.invitation.textp5'),
              this.$t('myAdd.invitation.textp6'),
              this.$t('myAdd.invitation.textp7'),
              this.$t('myAdd.invitation.textp8')
            ]
          }
        ]
      }
    },
    inviteCode () {
      return this.userInfo.inviteCode
    },
    inviteUrl () {
      let url = null
      if (process.env.NODE_ENV === 'production' && this.showH5OrPcInviteLink === 'H5') {
        url = this.http + this.baseData._webSiteInfo.ex_h5_url + '/register?inviteCode=' + this.userInfo.inviteCode
      } else {
        url = location.origin + '/register?inviteCode=' + this.userInfo.inviteCode
      }
      return url
    },
    h5OrPc () {
      return this.showH5OrPcInviteLink === 'PC' ? 'H5' : 'PC'
    }
  },
  mounted () {
    this.getInviteConfig()
  },
  watch: {
    'userInviteInfo.isParticipate' (newVal) {
      newVal === 0 && (this.showManagerDialog = true)
    }
  },
  methods: {
    closeDialog () {
      this.toC1Vertify = false
      this.applyToManager = false
      this.showPosters = false
      this.showManagerDialog = false
      this.upgrageDialogFlag = false
    },
    // 获取用户的邀请信息
    getInviteConfig () {
      this.axios({
        url: this.$store.state.url.invite.invite_config,
        headers: {},
        method: 'post'
      }).then((res) => {
        if (res.code.toString() === '0') {
          let data = res.data
          this.userInviteInfo.upgrage = data.upgrage
          this.userInviteInfo.inviteCount = data.inviteCount
          this.userInviteInfo.isParticipate = data.isParticipate
          this.userInviteInfo.inviteReward = data.inviteReward || '0'
          this.userInviteInfo.inviteReward = this._P.fixD(this.userInviteInfo.inviteReward, 2)
          this.userInviteInfo.commissionCount = data.commissionCount || '0'
          this.userInviteInfo.fee = data.fee
          this.userInviteInfo.rule = data.rule
          this.userInviteInfo.reason = data.reason
          this.userInviteInfo.level = data.level
          this.userInviteInfo.dialog = data.dialog
        } else {
          this.$store.dispatch('setTipState', {text: res.msg, type: 'error'})
        }
      })
    },
    // 根据用户的状态谈窗
    clickToApply () {
      if (this.authNewLevel === 'C0') {
        this.showToC1Dialog()
        return
      }
      if (this.userInviteInfo.isParticipate === 0 || this.userInviteInfo.isParticipate === 3) {
        this.showApplyDialog()
      } else if (this.userInviteInfo.isParticipate === 1) {
        return false
      } else if (this.userInviteInfo.isParticipate === 2) {
        this.toInviteCommission()
      }
    },
    // 开启去实名弹窗
    showToC1Dialog () {
      this.toC1Vertify = true
    },
    // 去实名
    toC1 () {
      this.$router.push({path: '/personal/information'})
    },
    // 开启立即申请弹窗
    showApplyDialog () {
      this.applyToManager = true
    },
    // 立即申请
    toApplyNow () {
      if (this.authNewLevel === 'C0') {
        this.closeDialog()
        this.showToC1Dialog()
        return false
      }
      if (!this.dbClick) {
        return false
      }
      this.dbClick = false
      this.axios({
        url: this.$store.state.url.invite.apply_for,
        headers: {},
        methods: 'post'
      }).then((res) => {
        if (res.code.toString() === '0') {
          this.getInviteConfig()
          this.$store.dispatch('setTipState', {text: this.$t('myAdd.invitation.applyReason')})
        } else {
          this.$store.dispatch('setTipState', {text: res.msg, type: 'error'})
        }
        this.dbClick = true
        this.closeDialog()
      })
    },
    // 开启升级弹窗
    showUpgrageDialog () {
      this.upgrageDialogFlag = true
    },
    // 立即升级
    toUpgrageNow () {
      if (!this.dbClick) {
        return false
      }
      this.dbClick = false
      this.axios({
        url: this.$store.state.url.invite.up_grade,
        headers: {},
        methods: 'post'
      }).then((res) => {
        if (res.code.toString() === '0') {
          this.getInviteConfig()
          this.$store.dispatch('setTipState', {text: this.$t('myAdd.invitation.upgrageSuc')})
        } else {
          this.$store.dispatch('setTipState', {text: res.msg, type: 'error'})
        }
        this.dbClick = true
        this.closeDialog()
      })
    },
    // 展示海报
    showPosterDialog () {
      this.showPosters = true
      this.getPostersImg()
    },
    // 获取邀请海报
    getPostersImg () {
      if (!this.dbClick) {
        return false
      }
      this.dbClick = false
      this.axios({
        url: this.$store.state.url.invite.posters,
        headers: {},
        method: 'GET'
      }).then(res => {
        if (res.code.toString() === '0') {
          this.invite_img = res.data.invite_img
        } else {
          this.$store.dispatch('setTipState', {text: res.msg, type: 'error'})
        }
        this.dbClick = true
      })
    },
    // 去已邀请好友组件
    toInviteFriends () {
      this.$router.push({
        path: '/personal/inviteFriends',
        query: {
          num: this.userInviteInfo.inviteCount
        }
      })
    },
    // 去邀请奖励组件
    toInviteReward () {
      this.$router.push({
        path: '/personal/inviteReward',
        query: {
          tab: 'invitation',
          reward: this.userInviteInfo.inviteReward
        }
      })
    },
    // 去邀请佣金
    toInviteCommission () {
      this.$router.push({
        path: '/personal/inviteCommission',
        query: {
          tab: 'invitation',
          commission: this.userInviteInfo.commissionCount
        }
      })
    },
    // 复制邀请码
    copyCode () {
      this.$refs.inviteCode.select()
      document.execCommand('copy')
      this.$store.dispatch('setTipState', this.$t('personal.copeSuccess'))
    },
    // 复制邀请链接
    copyInviteUrl () {
      this.$refs.inviteUrl.select()
      document.execCommand('copy')
      this.$store.dispatch('setTipState', this.$t('personal.copeSuccess'))
    },
    chooseInviteLink () {
      if (process.env.NODE_ENV === 'production') {
        this.showH5OrPcInviteLink = this.showH5OrPcInviteLink === 'PC' ? 'H5' : 'PC'
      }
    }
  }
}
</script>

